<template>
	<view class="list" :class="[!showOp?'init':'']" v-if="show">
		<view class="card flex-c" @click="navTo">
			<view class="thumb">
				<view class="status flex-c" :class="['status'+info.device_status]">{{status[info.device_status]}}</view>
				<u-image :src="info.store_img || info.device_imgs_f" mode="aspectFill" width="218rpx"
					height="218rpx"></u-image>
			</view>
			<view class="content">
				<view class="title" v-if="info.device_name || info.device_name_f">
					{{info.device_name || info.device_name_f}}
				</view>
				<view class="tag_flex flex-c">
					<view class="tag flex-c">{{info.type_name1}}</view>
				</view>
				<view class="desc">
					<view>类型：{{info.type_name2 || ''}}</view>
					<view>品牌：{{info.type_name3 || ''}}</view>
					<view>编号：{{info.device_sn_f ||info.device_sn|| ''}}</view>
					<view>系列：{{info.type_name4 || ''}}</view>
					<view v-if="!showOp" class="flex-c" style="justify-content: flex-start;" @click.stop="toGuide">
						地点：{{info.store_address || info.address_f || ''}} <u-image src="/static/images/guide.png"
							mode="aspectFit" width="40rpx" height="40rpx" v-if="type==2"></u-image></view>
				</view>
			</view>
		</view>
		<view class="btns flex-c" v-if="showOp && info.device_status!=4&&info.device_status!=1">
			<view class="btns_son flex-c" @click="setActive">
				修改状态
				<view class="change_status" v-if="active==index">
					<view class="change_btn flex-c" @click="setStatus(0)" v-if="info.device_status!=0">正常</view>
					<view class="change_btn flex-c" @click="setStatus(2)" v-if="info.device_status!=2">设备停机</view>
					<view class="change_btn flex-c" @click="setStatus(3)" v-if="info.device_status!=3">异常可使用</view>
					<view class="change_btn flex-c" @click="unbind">解绑</view>
				</view>
			</view>
			<view class="btns_son flex-c" @click="$func.toUrl('/pages_user/repair/add?id='+info.id)">报修</view>
		</view>

	</view>
</template>

<script>
	import moment from "moment"
	export default {
		name: "deviceCard",
		props: {
			showOp: {
				type: Boolean,
				default: true
			},
			item: {
				type: Object,
				default: () => {}
			},
			itemDetail: {
				type: Object,
				default: null
			},
			active: {
				type: Number,
				default: -1,
			},
			index: {
				type: Number,
				default: 0,
			},
			toUrl: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				info: {},
				status: ['正常', '维修中', '停机', '异常可使用', '报废'],
				show: true,
			};
		},
		computed: {
			type() {
				return this.$store.state.user.info.type
			}
		},
		created() {
			if (this.itemDetail) {
				let infoDetail = {
					...this.itemDetail
				}
				infoDetail.type_name1 = this.itemDetail.type_name1 && this.itemDetail.type_name1.district_name
				infoDetail.type_name2 = this.itemDetail.type_name2 && this.itemDetail.type_name2.district_name
				infoDetail.type_name3 = this.itemDetail.type_name3 && this.itemDetail.type_name3.district_name
				infoDetail.type_name4 = this.itemDetail.type_name4 && this.itemDetail.type_name4.district_name
				this.info = {
					...infoDetail
				}
			} else {

				this.info = {
					...this.item
				}
				// infoDetail.type_name1 = this.item.type_name1&&this.item.type_name1.district_name
				// infoDetail.type_name2 = this.item.type_name2&&this.item.type_name2.district_name
				// infoDetail.type_name3 = this.item.type_name3&&this.item.type_name3.district_name
				// infoDetail.type_name4 = this.item.type_name4&&this.item.type_name4.district_name
				// this.info = {...infoDetail}

			}
			console.log(this.info)


		},
		methods: {
			navTo() {
				if (this.toUrl) {
					this.$func.toUrl('/pages_user/device/detail?id=' + this.info.id)
				}

			},
			toGuide() {
				if (this.type == 2) {
					this.$func.openLocation(this.info.latitude, this.info.longitude, this.info.store_address)
				}

			},
			setActive() {
				const index = this.active == this.index ? -1 : this.index

				this.$emit('setActive', index)
			},
			unbind() {
				uni.showModal({
					title: '提示',
					content: '确定要解绑设备吗？',
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							this.$http.post('/data/api.auth.User/deviceUnbind', {
								device_id: this.info.id
							}).then(res => {
								this.show = false
								this.$func.tips('解绑成功')
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			setStatus(status) {
				uni.showModal({
					title: '提示',
					content: '确定更改设备状态吗？',
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							this.$http.post('/data/api.auth.User/deviceUp', {
								device_id: this.info.id,
								device_status: status,
							}).then(res => {
								this.$func.tips('修改成功')
								this.info.device_status = status
								this.$emit('getList')
							})
						} else if (res.cancel) {

						}
					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 20rpx;
		background: rgba(255, 255, 255, 1);

		&.init {
			border-radius: 0;
			margin: 0;
			padding: 0;
			background: rgba(255, 255, 255, 0);
		}

		.card {
			align-items: flex-start;
		}

		.thumb {
			width: 218rpx;
			height: 218rpx;
			background: rgba(228, 228, 228, 1);
			border-radius: 10rpx;
			position: relative;

			.status {
				position: absolute;
				z-index: 99;
				padding: 0 10rpx;
				height: 34rpx;
				border-radius: 10rpx 0px 10rpx 0px;
				font-size: 20rpx;
				color: #FFFFFF;

				&.status0 {
					background: rgba(34, 202, 8, 1);
				}

				&.status1 {
					background: #D81E06;
				}

				&.status2 {
					background: #F68C4F;
				}

				&.status3 {
					background: #D81E06;
				}
			}
		}

		.content {
			flex: 1;
			margin-left: 20rpx;

			.title {
				font-size: 36rpx;
				color: #333333;
				line-height: 36rpx;
				margin-bottom: 20rpx;


			}

			.tag_flex {
				justify-content: flex-start;
				margin-bottom: 20rpx;
			}

			.tag {
				padding: 0px 10rpx;
				height: 52rpx;
				background: rgba(248, 248, 248, 1);
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #ADADAD;
			}

			.desc {
				font-size: 24rpx;
				line-height: 34rpx;
				color: #ADADAD;
			}
		}

		.btns {
			justify-content: flex-end;

			.btns_son {
				padding: 0 20rpx;
				min-width: 100rpx;
				height: 70rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 10rpx;
				margin-top: 28rpx;
				position: relative;

				&:nth-child(1) {
					color: #D81E06;
				}

				&:nth-child(2) {
					background-color: #F68C4F;
				}

				&:nth-child(3) {
					background-color: #4F6FF6;
				}

				.change_status {
					// display: none;
					position: absolute;
					left: 0;
					top: 70rpx;
					width: 100%;

					background: rgba(252, 146, 133, 1);
					border-radius: 10rpx;
					z-index: 99;
					overflow: hidden;

					.change_btn {
						height: 66rpx;
						font-size: 30rpx;
						color: #FFFFFF;
						border-radius: 10rpx;

						&:nth-child(1) {
							background-color: #D81E06;
						}

					}
				}

				&:hover {
					.change_status {

						display: block;


					}
				}

			}
		}
	}
</style>